import { useEffect, useLayoutEffect, useRef, useState } from "react";
import "./App.css";

function App() {
   const [count, setCount] = useState(0)

   const updateCount = () => {
    setCount(count + 1)
   }

   function useInterval (fn, delay) {
        const callbackFn = useRef(fn)

        useLayoutEffect(() => {
            callbackFn.current = fn
        })

        useEffect(() => {
            const timer = setInterval(() => callbackFn.current(), delay)
            return () => {
                clearInterval(timer)
            }
        }, [])
   }

   useInterval(updateCount, 1000)

   return <>
    <div>{count}</div>
   </>
}

export default App;
